import React, { useState } from 'react'
import { map } from 'lodash'

import SvgIcon from '../common/svg-icon'

import scss from './styles/video-mask.module.scss'

const VideoMask = ({ data, handleClick }) => {
  return (
    <div className={scss.mask} style={{ display: 'none' }}>
      <div className={scss.closeBtn} onClick={({ target }) => handleClick(target)}>
        <span>[ X ]</span>
      </div>
      {map(data, ({ label, value, svg }, k) => {
        return (
          <div key={k} className={scss.item}>
            <span style={{ display: svg ? 'none' : 'block' }}>{label}</span>
            <SvgIcon icon={label} style={{ display: svg ? 'block' : 'none' }} marginRight={5} />
            <span>{value}</span>
          </div>
        )
      })}
    </div>
  )
}

export default VideoMask
